<template>
  <div>
  <div class="recommend border-bottom" v-for="item of reclist" :key="item.id">
    <div style="float: left;">
      <img class="list-img" :src="item.imgs"
      mode="scaleToFill" style="width: 1.875rem; height: 1.875rem; position: relative;">
    </div>
    <div class="recommend-title" style="float: left;">
      <div>
        <span style="padding: 0.16rem 0;">{{ item.name }}</span>
      </div>
      <div style="width: calc(100% - 1.875rem); position: absolute; bottom: 0px; padding-left: 0.2rem; height: 60%;">
      <div class="price" style="margin-bottom: 0.1rem;">
        <span style="margin-right: 0.2rem;" class="col">¥&nbsp;{{ item.price }}</span>
        <span class="virtual_price">{{ item.pri }}</span>
      </div>
      <div style="bottom: 0px; padding-top: 0.2rem;">
        <span class="sales">销量：{{ item.sale }}</span>
      </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'Recommend',
  props: {
    reclist: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .recommend
    display inline-block
    vertical-align middle
    height auto
    position relative
    width 100%
    text-decoration inherit
    border-radius inherit
    z-index 1
    padding 0.2rem 0.2rem
    .recommend-title
      padding-left 0.3rem
      .col
        color #f60
        padding 0.2rem 0
</style>
